<template>
  <div class="echarts_box" ref="chart"   ></div>
</template>

<script>
export default {
  name: "bars",
  props: {
      option: Object,
      data: Object,
      unit:String,
  },
 data() {
    return {
      lineDatas: {},
      timeer: "",
      defaultColors:["#286AF7","#00BAE9","#3BD242","#DFDF01","#FD9802","#F9691A","#F14E4E","#AE0CE3","#6E11EC","#4911EC"]
    };
  },
  methods: {
    initChart() {
    const chart = this.$refs.chart;
      var _this = this;
      this.lineDatas=this.data
      var unit=this.data.unit||this.unit|| this.option.unit||''
      if (chart) {
        let myEchart = echarts.init(chart);
        this.myChart = myEchart;
        let barColor = this.option.barColor || [];
         var yAxis=[
            {
              name:unit || " ",
              nameTextStyle: {
                color: this.option.yNameColor || "#fff",
                fontSize: this.option.yNameFontSize || 12,
              },
               data:  this.lineDatas.categories,
              type: this.option.category ? "category":"value",
              axisLabel: {
                show: this.hasProp(this.option,'yAxisLabelShow',true),
                margin: 10,
                color: this.option.yLabelColor || "#fff",
                textStyle: {
                  fontSize: this.option.yLabelFontSize || 12,
                },
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: this.hasProp(this.option, "yAxisLine", true),
                lineStyle: {
                  width:1,
                  color: this.option.yaxisLineColor || "#fff",
                  opacity: 0.4,
                },
              },
              splitLine: {
                show:this.hasProp(this.option, "yAxisSplitLineShow", true),
                lineStyle: {
                  type: this.option.yAxisSplitLineType || "solid",
                  color: this.option.yAxisSplitLineColor || "#fff",
                  width: 0.5,
                 
                },
              },
            },
          ]
  
   
     if(this.option.yAxisTwo){
            yAxis.push( {
            type: 'value',
             name:"%",
                nameTextStyle: {
                color: this.option.yNameColor || "#fff",
                fontSize: this.option.yNameFontSize || 12,
              },
             axisLabel: {
                show: true,
                margin: 10,
                color: this.option.yLabelColor || "#000",
                textStyle: {
                  fontSize: this.option.yLabelFontSize || 12,
                },
              },  
                axisTick: {
                show: false,
              },
              axisLine: {
                show: this.hasProp(this.option, "yAxisLine", true),
                lineStyle: {
                  width:1,
                  color: this.option.yaxisLineColor || "#fff",
                  opacity: 0.4,
                },
              },
              splitLine: {
                show:this.hasProp(this.option, "yAxisSplitLineShow", true),
                lineStyle: {
                  type: this.option.yAxisSplitLineType || "solid",
                  color: this.option.yAxisSplitLineColor || "#fff",
                  width: 0.5,
                 
                },
              },
                formatter:"{value}"
        })
          }
        let option = {
          title: {
            show: this.option.istl || false,
            text: this.option.titleText || " ",
            top: "top",
            left: this.option.titlePositionLeft || "left",
            textStyle: {
              fontSize: this.option.titleFontSize || 18,
              color: this.option.titleColor || "#fff",
            },
          },
          grid: {
            top: this.option.gridTop + "%",
            right: this.option.gridRight + "%",
            // left: this.option.gridLeft + "%",
            left:"1%",
            bottom: this.option.gridBottom + "%",
            containLabel: true,
          },
          tooltip: {
            show: true,
            trigger: "axis",
          },
          legend: {
            show: this.option.legend || false,
            top: this.option.legendPositionTop || "top",
            left: this.option.legendPositionLeft || "right",
            icon:this.option.legendIcon||'',
            itemWidth: 11,
            itemHeight: 7,
            textStyle: {
              color: this.option.legendColor || "#fff",
              fontSize: this.option.legendFontSize || 12,
            },
          },
          xAxis: [
            {
              show:this.hasProp(this.option, "xAxisShow", true),
              type: this.option.category ? "value" : "category",
              name: this.option.xAxisName || "",
              nameTextStyle: {
                color: this.option.nameColor || "#fff",
                fontSize: this.option.nameFontSize || 12,
              },
              data:  this.lineDatas.categories,
              axisLine: {
                show: this.hasProp(this.option,"xAxisLineShow",true),
                lineStyle: {
                  width:1,
                  color: this.option.xaxisLineColor || "#fff",
                },
              },
              axisTick: {
                show: this.option.xAxisTickShow || false,
                lineStyle: {
                  color: this.option.xAxisTickLineColor || "#fff",
                  opacity: 0.1,
                },
              },
              splitLine: {
                show: this.hasProp(this.option, "xAxisSplitLineShow", false),
                lineStyle: {
                  type: this.option.xAxisSplitLineType || "solid",
                  color: this.option.splitLineColor || "#fff",
                  opacity: 0.1,
                },
              },
              axisLabel: {
                show: this.hasProp(this.option,'xAxisLabelShow',true),
                color: this.option.xNameColor || "rgba(255,255,255,.6)",
                rotate: this.option.xAxisRotate,
                //  interval: 0,
                interval: this.option.xAxisInterval||0,
                textStyle: {
                  fontSize: this.option.xNameFontSize || 12,
                },
                formatter: this.option.xAxisLabelVertical?(value)=> {
                  return value.split('').join('\n')
                }:'{value}'
              },
            },
          ],
          yAxis:yAxis,
          series: (function () {
            var list = (_this.lineDatas.series || []).map((item, i) => {
              return {
                type: _this.option.type[i]||_this.option.type[0],
                name: item.name,
                data: item.data,
                yAxisIndex:_this.option.yAxisTwo?i:0,
                stack:_this.option.stack?"total":'',
                barWidth: _this.option.barWidth || 0,
                markLine: (function () {
                  var markLineShow = _this.option.markLineShow || false;
                  var list;
                  if (markLineShow) {
                    list = {
                       lineStyle: {
                        normal: {
                          type: "dashed",
                           color:'#3196FA'
                        },
                      },
                       label: {
                        show: true,
                        position: 'end',
                    },
                      data: [
                        {
                          type: "average",
                          name: "平均值",
                        },
                      ],
                      symbolSize: 0,
                     
                    };
                  }
                  return list;
                })(),
                itemStyle: {
                  normal: {
                    barBorderRadius: _this.option.barRadius || "0",
                    color: _this.getColor(barColor, i),
                  },
                },
                label: {
                  normal: {
                    show: _this.option.seriesLableShow,
                    fontSize: _this.option.seriesLableFontSize || 14,
                    color: _this.option.seriesLableColor || "#fff",
                    borderRadius: 0,
                    position: _this.option.lablePosition ||"top",
                  },
                },
              };
            } );
            return list;
          })(),
        };
        this.myChart.resize();
        myEchart.setOption(option, true);
      }
    },
    init() {
       this. initChart()
    },
    hasProp(obj, field, defaultValue) {
      if (obj.hasOwnProperty(field)) {
        return obj[field];
      } else {
        return defaultValue;
      }
    },
    getColor(colors, i, isFirst, orient) {
      let color = colors && colors[i];
      if (color) {
        if (isFirst) {
          return color.color1;
        }
        orient = orient || "horizontal";
        if (orient == "vertical") {
          return new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: color.color1,
              },
              {
                offset: color.postion || 1,
                color: color.color2 || color.color1,
              },
            ],
            false
          );
        }
        return new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: color.color1,
            },
            {
              offset: color.postion || 1,
              color: color.color2 || color.color1,
            },
          ],
          false
        );
      } else {
        return this.defaultColors[i];
      }
    },
  },
 mounted() {
    this.init();
  },
  watch: {
    option: {
      handler(val, oldval) {
        if(val) this.init();
      },
      deep: true,
      immediate: true,
    },
    data: {
      handler(val, oldval) {
        if(val) this.init();
      },
      deep: true,
    },
    unit(val, oldval) {
       this.init();
    }
   
   
  },
  
};
</script>

<style scoped>
.echarts_box {
  width: 100%;
  height:100%;
}
</style>